<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="icon" type="image/png" sizes="16x16" href="../../static/icons/favicon.svg">
    <link rel="stylesheet" href="{{ url_for('static', filename='base.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='user/css/home.css') }}">
    <script src="../../static/animate.js"></script>
    <script src="../../static/user/js/focus.js"></script>
    <script src="../../static/jQuery.js"></script>
    <script src="../../static/user/js/nav.js"></script>
    <script src="../../static/user/js/home.js"></script>

</head>
<body>
<!-- 导航栏 -->
<div class="header">
    <div class="w">
        <a class="index" href="{{ url_for('user.index') }}">
            <span>
              Store
            </span>
        </a>
        <ul class="list">
            <li class="part curr">
                <a class="link" href="{{ url_for('user.index') }}">首页</a>
            </li>
            <li class="part">
                <a class="link" href="{{ url_for('user.car') }}">购物车</a>
            </li>
            <li class="part">
                <a class="link" href="{{ url_for('user.orders') }}">我的订单</a>
            </li>
            <li class="part">
                <a class="link" href="{{ url_for('user.about') }}">全部商品</a>
            </li>
            <li class="part search-li">
                <!--                <input class="search" type="text" name="keyword" value="" placeholder="书名/作者名">-->
                <!--                <img class="search-icon" style="width: 20px;height: 20px;" src="../../static/icons/search.svg">-->

                <form action="{{ url_for('user.search') }}" method="get">
                    <input class="search" type="text" name="keyword" value="" placeholder="书名/作者名">
                    <button type="submit">
                        <img class="search-icon" style="width: 20px;height: 20px;" src="../../static/icons/search.svg">
                    </button>
                </form>

            </li>
            <li class="part">
                {% if user %}
                <a href="javascript:;" class="logout">
                    欢迎，{{ user.name }}
                </a>
                {% else %}
                <a class="link" href="{{ url_for('user.login') }}">
                    登录
                </a>
                {% endif %}
            </li>
        </ul>
    </div>
</div>
<!-- 导航栏 -->

<!--轮播图-->
<div class="focus-box">
    <div class="focus fl w">
        <!-- 左侧按钮 -->
        <a href="javascript:;" class="arrow-l">
            &lt;
        </a>
        <!-- 右侧按钮 -->
        <a href="javascript:;" class="arrow-r"> &gt; </a>
        <!-- 核心的滚动区域 -->
        <ul>
            {% for img in random_book %}
            <li>
                <a href="#">
                    <img src="{{img.photo}}" alt="">
                    <span>{{img.book_name}}</span>
                </a>
            </li>
            {% endfor %}
        </ul>
        <!-- 小圆圈 -->
        <ol class="circle">
        </ol>
    </div>
</div>
<!--轮播图-->

<!--出版图书-->
<div class="public w clearfix">
    <div class="title">
        <h2>热门图书</h2>
    </div>
    <div class="show">
        <div class="left">
            <img class="topic" src="../../static/icons/topic.svg">
            <h3><a href="{{url_for('user.detail',book_id = random_book[4].book_id)}}">{{random_book[4].book_name}}</a>
            </h3>
            <p>作者：<span>{{random_book[4].book_author}}</span></p>
            <p class="desc">
                {{random_book[4].desc}}</p>
            <span><a href="{{url_for('user.detail',book_id = random_book[4].book_id)}}"><img class="img"
                                                                                             src="{{random_book[4].photo}}"
                                                                                             alt=""></a></span>
        </div>
        <ul class="middle">
            {% for book in random_book %}
            {% if loop.index <= 4 %}
            <li><a href="{{url_for('user.detail',book_id = book.book_id)}}"><img src="{{book.photo}}"
                                                                                 alt="">
                <p>{{book.book_name}}</p></a><span>{{book.book_author}}</span></li>
            {% endif %}
            {% endfor %}
        </ul>
        <div class="right">
            <h3><img class="icon" src="../../static/icons/top.svg"><a href="">畅销榜</a></h3>
            <ul>
                {% for book in books %}
                {% if loop.index <= 8 %}
                <li>
                    <dl class="item">
                        <dt>{{loop.index}}</dt>
                        <dd><a href="{{url_for('user.detail',book_id = book.book_id)}}"><span class="bookName">{{book.book_name}}</span><span><img
                                src="../../static/icons/top-number.svg">{{book.top}}</span></a></dd>
                    </dl>
                </li>
                {% endif %}
                {% endfor %}
            </ul>
        </div>
    </div>
    <div style="margin-top:20px;font-size: 14px;height: 30px"><a href="{{ url_for('user.hot_map') }}" style="float: right;">出版社详情></a></div>
    <div class="ph">
        <div class="leftImg">{{ chart2|safe }}</div>
        <div class="rightImg">{{ chart1|safe }}</div>
    </div>
</div>

<div class="footer">
    <p>伟大的我写的网上书城 &copy; copyright</p>
</div>
</body>
</html>